<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console1.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-input {
            height: 50px;
        }

        .layui-form-label {
            height: 50px;
            line-height: 45px;
            padding: 0px;
        }

        .layui-form-select dl {
            position: absolute;
            left: 0;
            top: 51px;
            height: 240px;
        }

        .submit-btn-container .layui-btn, .pear-btn {
            height: 45px;
            width: 130px;
            font-size: 20px;
        }

        .pear-btn i {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="main-container"
     style="display: flex;flex-direction: column;height: calc(100vh - 50px);justify-content: center;">
    <form class="layui-form" action="" onsubmit="return false" style="font-size: 16px;">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs12 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="display:none">uuid</label>
                    <div class="layui-input-block" style="display:none">
                        <input type="text" th:value="${uuid}" id="uuid" name="uuid" autocomplete="off"
                               placeholder="请输入id" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">档号</label>
                    <div class="layui-input-block">
                        <input type="text" th:value="${reference}" name="reference"
                               autocomplete="off" placeholder="请输入档号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">档案名</label>
                    <div class="layui-input-block">
                        <input type="text" th:value="${file_name}" name="fileName" required lay-verify="required"
                               autocomplete="off"
                               placeholder="请输入档案名" class="layui-input" lay-reqtext="档案名为必填项">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">案卷号</label>
                    <div class="layui-input-block">
                        <input type="text" name="fileNo" th:value="${file_no}"
                               autocomplete="off"
                               placeholder="请输入案卷号"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">借阅状态</label>
                <div class="layui-input-block">
                    <select name="status" lay-verify="required" lay-search>
                        <option value="0" th:selected="false eq ${status}">未借出</option>
                        <option value="1" th:selected="true eq ${status}">已借出</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">用户名</label>
                <div class="layui-input-block">
                    <select name="userId" lay-verify="required" lay-reqtext="用户名为必填项" lay-search>
                        <option value="">请选择用户名</option>
                        <option th:each="item,stat:${myUserList}" th:value="${item.userId}"
                                th:selected="${user_id} eq ${item.userId}" th:text="${item.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">位置</label>
                <div class="layui-input-block">
                    <div id="position"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">档案简介</label>
                <div class="layui-input-block">
                <textarea name="profile" th:text="${profile}" placeholder="请输入档案简介"
                          class="layui-textarea" style="min-height: 65px!important;"></textarea>
                </div>
            </div>
            <div class="layui-form-item submit-btn-container">
                <div class="layui-input-block">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="manageSave">
                        <i class="layui-icon layui-icon-file-b"></i>
                        保存
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 25px">重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script src="/xm-select.js"></script>
<script th:inline="javascript">
    var uuid = [[${uuid}]];
    var $ = layui.jquery;

    var position = xmSelect.render({
        el: '#position',
        // size: 'large',
        theme: {
            color: '#0081ff',
        },
        autoRow: true,
        filterable: true,
        tips: '请选择档案位置',
        style: {
            minHeight: '38px',
            height: '38px',
            fontSize: '16px'
        },
        tree: {
            show: true,
            showFolderIcon: true,
            showLine: true,
            indent: 20,
        },
        model: {
            label: {
                // type: 'block',
                block: {
                    //最大显示数量, 0:不限制
                    showCount: 6,
                    //是否显示删除图标
                    showIcon: true,
                }
            }
        },
        toolbar: {
            show: true,
            list: ['ALL', 'REVERSE', 'CLEAR']
        },
        height: '180px',
        showCount: 5,
        data: function () {
            return []
        }
    })
    $(document).ready(function () {
        // 当文档加载完毕后执行的代码
        $.ajax({
            url: '/file/manage/position/return/tree?uuid=' + uuid,
            type: 'get',
            success: function (result) {
                position.update({
                    data: result
                })

            }
        })
    });

    layui.use(['form', 'jquery', 'laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        //删除电子档案
        $("#deleteElectronicFiles").click(function () {
            $.ajax({
                url: '/file/manage/delete/electron',
                data: {"id": $("#id").val()},
                dataType: 'json',
                contentType: 'application/json',
                type: 'get',
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg(result.message, {icon: 1, time: 3000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                            parent.layui.table.reload("valid");
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
        })

        laydate.render({
            elem: '#selectTime' //指定元素
            , theme: '#393D49',
            type: 'year'
        });
        laydate.render({
            elem: '#entryTime' //指定元素
            , theme: '#393D49',
            type: 'datetime'
        });


        form.on('submit(manageSave)', function (data) {
            let select = position.getValue("valueStr");
            console.log(select)
            if (select.length === 0) {
                position.warning('#f80808', true);
                layer.msg("请选择位置", {icon: 2, time: 1800});
            } else {
                let loading = layer.load();
                $.ajax({
                    url: '/file/manage/edit/save',
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.message, {icon: 1, time: 3000}, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                                parent.layui.table.reload("valid");
                            });
                        } else {
                            layer.msg(result.message, {icon: 2, time: 3000});
                        }
                    }
                })
            }
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>
